<template>
    <div class="mainWrap">

        <Head :softName="companyName"></Head>
        <a-layout-content :style="{ padding: '8px 16px 0', height: 'calc(88vh )' }">
            <div class="contentWrap">
                <a-row :gutter="[0, 16]">
                    <a-col :span="24" v-if="Array.isArray(oneArray)">
                        <div class="oneWrap marginBottom">
                            <!-- 第一行 -->
                            <a-row class="height100" :gutter="[16, 0]">
                                <a-col class="height100" :span="4" v-for="(item, index) in oneArray" :key="item.key">
                                    <ThirdBox :title="item.title" :index="index" :icon="item.icon" :num="item.num"
                                        :unit="item.unit">
                                    </ThirdBox>
                                </a-col>
                            </a-row>
                        </div>
                    </a-col>
                    <a-col :span="24">
                        <div class="twoWrap">
                            <!-- 第二行 -->
                            <a-row class="height100" :gutter="[16, 0]">
                                <a-col :span="8" class="height100" v-if="twoObj.getCompanyTeamCompleted">
                                    <div class="twoRow height100 borderShaw backGradient">
                                        <div class="head">
                                            <SbuHead :title="twoObj.getCompanyTeamCompleted.title"></SbuHead>
                                        </div>
                                        <div class="echartsBox">
                                            <Echarts type="bar" :dataList="twoObj.getCompanyTeamCompleted.data"
                                                :setting="{ grid: { top: '18px' } }">
                                            </Echarts>
                                        </div>
                                    </div>
                                </a-col>
                                <a-col :span="4" class="height100"
                                    v-if="twoObj.getcompanyteammax || twoObj.getCompanyFlowMax">
                                    <div class="twoRow infoS height100 borderShaw backGradient">
                                        <a-row class="height100">
                                            <a-col :span="24" class="heads">
                                                <SbuHead :title="twoObj.getcompanyteammax.title"></SbuHead>
                                            </a-col>
                                            <a-col :span="24">
                                                <div class="maxBox fontInfo"
                                                    v-if="Array.isArray(twoObj.getcompanyteammax.data) && twoObj.getcompanyteammax.data.length == 1">
                                                    {{ twoObj.getcompanyteammax.data[0].name }}({{
                                                        twoObj.getcompanyteammax.data[0].num }})
                                                </div>
                                            </a-col>
                                            <a-col :span="24" class="heads">
                                                <SbuHead :title="twoObj.getCompanyFlowMax.title"></SbuHead>
                                            </a-col>
                                            <a-col :span="24"
                                                v-if="Array.isArray(twoObj.getCompanyFlowMax.data) && twoObj.getCompanyFlowMax.data.length == 1">
                                                <div class="mounth fontInfo">
                                                    {{ twoObj.getCompanyFlowMax.data[0].name }}({{
                                                        twoObj.getCompanyFlowMax.data[0].num }})</div>
                                            </a-col>
                                        </a-row>
                                    </div>
                                </a-col>
                                <a-col :span="4" class="height100">
                                    <div class="twoRow height100 borderShaw backGradient">
                                        <a-row class="height100" v-if="twoObj.getCompanyPersonMax">
                                            <a-col :span="24" :data-json="JSON.stringify(twoObj.getCompanyPersonMax)">
                                                <SbuHead :title="twoObj.getCompanyPersonMax.title"></SbuHead>
                                            </a-col>
                                            <a-col :span="24" style="height: calc(100% - 24px);">
                                                <div class="nameWrap fontInfo "
                                                    v-if="Array.isArray(twoObj.getCompanyPersonMax.data)">
                                                    <div class="nameItem"
                                                        v-for="item in twoObj.getCompanyPersonMax.data"
                                                        :key="item.name">
                                                        <span>{{ item.name }}</span>
                                                        <span>({{ item.num }})</span>
                                                    </div>
                                                </div>
                                            </a-col>
                                        </a-row>
                                    </div>
                                </a-col>
                                <a-col :span="8" class="height100" v-if="twoObj.getCompanyFlowByDay">
                                    <div class="twoRow height100 borderShaw backGradient">
                                        <div class="head">
                                            <SbuHead :title="twoObj.getCompanyFlowByDay.title"></SbuHead>
                                        </div>
                                        <div class="echartsBox">
                                            <Echarts type="category" :dataList="twoObj.getCompanyFlowByDay.data"
                                                :setting="{ grid: { top: '18px' } }">
                                            </Echarts>
                                        </div>
                                    </div>
                                </a-col>
                            </a-row>
                        </div>
                    </a-col>
                    <a-col :span="24">
                        <div class="fourWrap">
                            <a-row class="height100" :gutter="[16, 0]">
                                <a-col class="height100" :span="8">
                                    <div class="fourRow height100 borderShaw backGradient">
                                        <div class="head">
                                            <SbuHead :title="getCompanyFlowexp.title"></SbuHead>
                                        </div>
                                        <div class="echartsBox">
                                            <div class="lineWrap backGradient" ref="texpFlow">
                                                <div class="contentItem" ref="texpFlow-height"
                                                    v-for="(item, index) in getCompanyFlowexp.data"
                                                    :key="item.id + '' + index">
                                                    <!-- 图标 -->
                                                    <div class="iconWrap">
                                                        <div class="icon"></div>
                                                    </div>
                                                    <div class="title">{{ item.name }}</div>
                                                    <div class="time">{{ item.num }}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a-col>
                                <a-col class="height100" :span="8">
                                    <div class="fourRow height100 borderShaw backGradient">
                                        <div class="head">
                                            <SbuHead :title="fourObj.getCompanyFlow8Max.title"></SbuHead>
                                        </div>
                                        <div class="echartsBox">
                                            <Echarts type="bar" :dataList="fourObj.getCompanyFlow8Max.data"
                                                :setting="{ color: ['#DBEACF', '#649B3F'], grid: { top: '18px' } }">
                                            </Echarts>
                                        </div>
                                    </div>
                                </a-col>
                                <a-col :span="8" class="height100" v-if="fourObj.getCompanyFlow8Min">
                                    <div class="fourRow height100 borderShaw backGradient">
                                        <div class="head">
                                            <SbuHead :title="fourObj.getCompanyFlow8Min.title"></SbuHead>
                                        </div>
                                        <div class="echartsBox">
                                            <Echarts type="bar" :dataList="fourObj.getCompanyFlow8Min.data"
                                                :setting="{ color: ['#EFF3CB', '#69B6DA',], grid: { top: '18px' } }">
                                            </Echarts>
                                        </div>
                                    </div>
                                </a-col>
                            </a-row>
                        </div>
                    </a-col>
                    <!-- 最后一行 -->
                    <a-col :span="24">
                        <div class="fourWrap">
                            <a-row class="height100" :gutter="[16, 0]">
                                <a-col class="height100" :span="8">
                                    <div class="fourRow height100 borderShaw backGradient"
                                        @click="handClick('getCompanyFlowHidden')">
                                        <!-- <div class="head">
                                            <SbuHead :title="getCompanyFlowHidden.title"></SbuHead>
                                        </div> -->
                                        <div class="tableBox">
                                            <ZSTable scroolHeight="24vh" :data="getCompanyFlowHidden.data"
                                                :isAutoPlay="true" :onRefresh="getCompanyFlowHiddenData"
                                                columnsName="getcompanyflowhidden"
                                                :newRowData="getCompanyFlowHidden.newRowData"></ZSTable>
                                        </div>
                                    </div>
                                </a-col>
                                <a-col :span="8" class="height100">
                                    <div class="fourRow height100 borderShaw backGradient" v-if="getCompany8Type">
                                        <div class="head">
                                            <SbuHead :title="getCompany8Type.title"></SbuHead>
                                        </div>
                                        <div class="itemBox">
                                            <a-row :gutter="[0, 0]">
                                                <a-col :span="6" v-for="(item, index) in getCompany8Type.data"
                                                    :key="item.name + '' + index">
                                                    <div class="boxItemWrap" :class="index > 3 ? 'mTop' : ''">
                                                        <BoxRight>
                                                            <div class="itemWrap">
                                                                <div class="itemLeft">
                                                                    <div class="itemLeftIcon"
                                                                        :class="`itemIcon${index}`">
                                                                    </div>
                                                                </div>
                                                                <div class="itemRight">
                                                                    <div class="numberWrap">
                                                                        <span class="number">
                                                                            {{ NumberFormatter(item.num) }}
                                                                        </span>
                                                                        <span style="font-size: 10.44px;">次</span>
                                                                    </div>
                                                                    <div class="name">{{ item.name }}</div>
                                                                </div>
                                                            </div>
                                                        </BoxRight>
                                                    </div>
                                                </a-col>
                                            </a-row>
                                        </div>
                                    </div>
                                </a-col>
                                <a-col :span="8" class="height100" v-if="getCompanyRale">
                                    <div class="fourRow height100 borderShaw backGradient"
                                        @click="handClick('getCompanyRale')">
                                        <!-- <div class="head">
                                            <SbuHead :title="getCompanyRale.title"></SbuHead>
                                        </div> -->
                                        <div class="tableBox">
                                            <ZSTable scroolHeight="20vh" :data="getCompanyRale.data" :isAutoPlay="true"
                                                :onRefresh="getCompanyRaleData" columnsName="getCompanyRale"
                                                :newRowData="getCompanyRale.newRowData">
                                            </ZSTable>
                                        </div>
                                    </div>
                                </a-col>
                            </a-row>
                        </div>
                    </a-col>
                </a-row>
            </div>
        </a-layout-content>
    </div>
</template>
<script>
import Head from '@/components/ScreenCommon/Head';
import ThirdBox from './components/Box.vue';
import SbuHead from './components/SubHead.vue';
import Echarts from './components/Echarts.vue';
import ZSTable from '@/components/ZSTable/ZSTable';
import BoxRight from '@/components/ZSBoxItem/BoxRight';

export default {
    name: 'screenFourth',

    components: {
        Head,
        ThirdBox,
        SbuHead,
        Echarts,
        ZSTable,
        BoxRight,
    },
    data() {
        return {
            // 当前公司名称
            companyName: '董矿公司固机三队',
            oneArray: [
                {
                    name: 'getcompanyflowforyear',
                    title: '年累计作业数',
                    num: 0,
                    key: '1',
                    icon: 'icon-donghuozuoye',
                    unit: '次',
                },
                {
                    name: 'getcompanyflowformonth',
                    title: '当月作业数',
                    num: 0,
                    key: '2',
                    icon: 'icon-zhuzhuangtu',
                    unit: '次',
                },
                {
                    name: 'getcompanymaxflow',
                    title: '单日最高发起数',
                    num: 0,
                    key: '3',
                    icon: 'icon-shenji',
                    unit: '次',
                },
                {
                    name: 'getcompanymonthhandle',
                    title: '当月平均每人处理量',
                    num: 0,
                    key: '4',
                    icon: 'icon-liucheng',
                    unit: '个',
                },
                {
                    name: 'getcompanyflowtype',
                    title: '目前累计流程数 ',
                    num: 0,
                    key: '5',
                    icon: 'icon-yonghu',
                    unit: '次',
                },
                {
                    name: 'getcompanysumflow',
                    title: '目前累计作业数 ',
                    num: 0,
                    key: '6',
                    icon: 'icon-icon_caigoushuliang',
                    unit: '次',
                },
            ],
            twoObj: {
                getCompanyTeamCompleted: {
                    title: '各岗位当月作业完成情况',
                    data: [],
                },
                getCompanyFlowByDay: {
                    title: '每日作业发起曲线',
                    data: [],
                },
                getcompanyteammax: {
                    title: '当月发起作业最多的岗位',
                    data: '',
                },
                getCompanyFlowMax: {
                    title: '当月发起最多的流程',
                    data: '',
                },
                getCompanyPersonMax: {
                    title: '当月作业最多的人',
                    data: [],
                },
            },
            // 高频、低频
            fourObj: {
                getCompanyFlow8Max: {
                    title: '热频流程 TOP8',
                    data: [],
                },
                getCompanyFlow8Min: {
                    title: '低频流程 TOP8',
                    data: [],
                },
            },
            // 异常流程
            getCompanyFlowexp: {
                data: [],
                title: '异常流程',
            },
            // 隐患排查治理
            getCompanyFlowHidden: {
                data: [],
                newRowData: {},
                title: '隐患排查治理'
            },
            // 
            getCompany8Type: {
                data: [],
                title: '本年度典型风险作业数据分析'
            },
            // 风险管控
            getCompanyRale: {
                data: [],
                newRowData: {},
                title: '风险作业管控'
            },
            // 定时器
            setIntName1: null,
            setIntName2: null,
            setIntName3: null,
            setIntName4: null,
            setIntName5: null,
        }
    },
    methods: {
        handClick(type) {
            // 
        },
        getData(type, aName, otherParams, finallyCallBack) {
            let params = {
                companyName: this.companyName,
                ...otherParams,
            }
            let urls = this[`$${aName.toLowerCase()}`];
            urls = urls.replace(/\s+/g, "");
            this.getAxios(urls, params).then((res) => {
                if (res.code == 200) {
                    let data = res.data;
                    if (type == 'one') {
                        // 第一行数据
                        let newOneArray = this.oneArray;
                        if (Array.isArray(data) && data.length == 1) {
                            newOneArray = newOneArray.map((val) => {
                                let obj = val;
                                if (val.name == aName) {
                                    obj['num'] = data[0].num;
                                }
                                return obj;
                            })
                        } else if (['string', 'number'].includes(typeof (data))) {
                            newOneArray = newOneArray.map((val) => {
                                let obj = val;
                                if (val.name == aName) {
                                    obj['num'] = data;
                                }
                                return obj;
                            })
                        } else if (typeof (data) == 'object') {
                            newOneArray = newOneArray.map((val) => {
                                let obj = val;
                                if (val.name == aName) {
                                    obj['num'] = data.num;
                                }
                                return obj;
                            })
                        }
                        this.oneArray = newOneArray;
                    } else if (type == 'two') {
                        // 第二行数据
                        let oldTwoObj = this.twoObj;
                        oldTwoObj[aName].data = data;
                        this.twoObj = {
                            ...this.twoObj,
                            ...oldTwoObj,
                        };
                    } else if (type == 'four') {
                        this.fourObj[aName].data = data;
                    } else if (['getCompanyFlowexp', 'getCompany8Type',].includes(type)) {
                        this[aName] = {
                            ...this[aName],
                            data: res.data,
                        }
                    } else if (['getCompanyFlowHidden', 'getCompanyRale'].includes(type)) {
                        if (otherParams && otherParams.newId) {
                            if (Array.isArray(data) && data.length > 0) {
                                this[aName] = {
                                    ...this[aName],
                                    newRowData: data[0],
                                }
                            }
                        } else {
                            this[aName] = {
                                ...this[aName],
                                data: res.data,
                            }
                        }
                    }
                }
            }).finally(() => {
                if (typeof (finallyCallBack) == 'function') {
                    finallyCallBack();
                }
            });
        },
        getOneLine() {
            let arr = this.oneArray.map(val => val.name);
            arr.filter((val) => {
                this.getData('one', val);
            })
        },
        // 第二行数据
        getTwoLine() {
            let arr = Object.keys(this.twoObj);
            arr.filter((val) => {
                this.getData('two', val);
            })
        },
        getFourLine() {
            let arr = Object.keys(this.fourObj);
            arr.filter((val) => {
                this.getData('four', val);
            })
        },
        NumberFormatter(s) {
            return Number(s).toLocaleString();
        },
        // 异常流程
        getCompanyFlowexpData() {
            this.getData('getCompanyFlowexp', 'getCompanyFlowexp', {}, () => {
                this.setIntName1 = setInterval(() => {
                    this.scroolTop('texpFlow', 'setIntName1')
                }, 20000)
            });
        },
        // 隐患排查治理
        scroolTop(r, names) {
            // 获取当前滚动条的位置
            let refsEl = this.$refs[r];
            let elArr = this.$refs[`${r}-height`];
            if (elArr.length <= 0) {
                return;
            }
            let h = elArr[0].offsetHeight;
            if (r == 'texpFlow') {
                h = (window.innerHeight / 100) * 4;
            } else if (r == 'jituanRef') {
                h = (window.innerHeight / 100) * 3.5 + 5;
            }
            // 当前滚动条位置
            let nowPosition = refsEl.scrollTop;
            let toScroop = h;
            // 滚动条最大高度
            var maxScrollTop = refsEl.scrollHeight - refsEl.clientHeight;
            if (nowPosition == 0) {
            } else {
                // 向上取整
                let snum = Math.ceil(nowPosition / h);
                toScroop = (snum + 1) * h;
            }
            if (toScroop > maxScrollTop) {
                toScroop = 0;
            }
            if (refsEl) {
                refsEl.scrollTo({
                    top: toScroop,
                    behavior: "smooth",
                })
                if (toScroop == 0) {
                    this.end(names);
                    if (r == 'texpFlow') {
                        this.getCompanyFlowexpData();
                    } else if (r == 'jituanRef') {
                        this.getflowforgroupday();
                    }
                }
            }
        },
        end(names) {
            if (names) {
                clearTimeout(this[names]);
                this[names] = null;
            } else {
                clearTimeout(this.setIntName1);
                this.setIntName1 = null;
                this.setIntName2 = null;
                this.setIntName3 = null;
                this.setIntName4 = null;
                this.setIntName5 = null;
            }
        },
        // 隐患排查治理
        getCompanyFlowHiddenData(aParams) {
            let backF = () => {
                this.setIntName4 = setInterval(() => {
                    let aParams = {};
                    let dataList = this.getCompanyFlowHidden.data;
                    if (Array.isArray(dataList) && dataList.length > 0) {
                        aParams['newId'] = dataList[0].id;
                    }
                    this.getData('getCompanyFlowHidden', 'getCompanyFlowHidden', aParams);
                }, 4000);
            }
            this.getData('getCompanyFlowHidden', 'getCompanyFlowHidden', aParams, backF);
            this.end('setIntName4');
        },
        // 风险作业数据分析
        getCompany8TypeData() {
            this.getData('getCompany8Type', 'getCompany8Type',)
        },
        // 风险管控
        getCompanyRaleData(aParams) {
            let backF = () => {
                this.setIntName5 = setInterval(() => {
                    let aParams = {};
                    let dataList = this.getCompanyRale.data;
                    if (Array.isArray(dataList) && dataList.length > 0) {
                        aParams['newId'] = dataList[0].id;
                    }
                    this.getData('getCompanyRale', 'getCompanyRale', aParams);
                }, 4000);
            }
            this.getData('getCompanyRale', 'getCompanyRale', aParams, backF);
            this.end('setIntName5');
        },
        // 定时获取
        startInner() {
            this.setIntName2 = setInterval(() => {
                // 第一行数据
                this.getOneLine();
            }, 10000);
            this.setIntName3 = setInterval(() => {
                this.getTwoLine();
                this.getFourLine();
                this.getCompany8TypeData();
            }, 1800000);
        },
    },
    mounted() {
        // 第一行数据
        this.getOneLine();
        // 第二行数据
        this.getTwoLine();
        // 第四行数据
        this.getFourLine();
        // 
        // 异常流程
        this.getCompanyFlowexpData();
        // 隐患排查治理
        this.getCompanyFlowHiddenData();
        // 风险作业数据分析
        this.getCompany8TypeData();
        // 风险管控
        this.getCompanyRaleData();
        this.startInner();
    },
    destroyed() {
        this.end();
    }
}
</script>
<style lang="less" scoped>
.mainWrap {
    width: 100vw;
    height: 100vh;
    background-image: url(~@/assets/images/screen/mainBack.png);
    background-color: rgba(10, 20, 39, 0.95);
    overflow: hidden;

    // 内容
    .contentWrap {

        .head {
            margin-bottom: 4px;
        }

        .oneWrap {
            height: 14vh;
        }

        .twoWrap {
            height: 21vh;

            .twoRow {
                height: 100%;

                .heads {
                    position: sticky;
                    top: 0px;
                }

                // 当月发起流程最多的站队
                .maxBox {
                    height: 34px;
                    margin: 8px;
                    padding: 8px 16px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                // 当月发起作业做多的流程
                .mounth {
                    height: 50px;
                    margin: 8px;
                    padding: 8px 16px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                // 当月处理作业流程最多人员
                .nameWrap {
                    // height: calc(100% - 30px - 12px);
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    overflow-y: auto;
                    padding-top: 8px;

                    .nameItem {
                        margin-bottom: 8px;
                    }
                }
            }

            .infoS {
                overflow-y: auto;
            }
        }

        .threeWrap {
            height: 23vh;
        }

        .fourWrap {
            height: 23vh;
        }

        .echartsBox {
            height: calc(100% - 30px);
        }

        .tableBox {
            // height: calc(100% - 24px);
            height: calc(100%);
        }
    }

    .height100 {
        height: 100%;
    }

    .borderShaw {
        padding: 8px 12px 12px 12px;
        border: 1px solid #B5B6B6;
        border-radius: 8px;
        box-shadow: 0px 0px 8px 1px #99999980;
    }

    .fontInfo {
        font-size: 14px;
        font-weight: 700;
        background-color: #16385488;
        color: #cdcdcd;
    }
}

// 背景渐变
.backGradient {
    background: linear-gradient(to top, rgba(32, 63, 125, 0.7), rgba(32, 63, 125, 0.0));
}

// 底部中间
.boxItemWrap {
    height: calc(8.5vh);
    margin: 0.5vh 4px 0.5vh 4px;

    .itemWrap {
        display: flex;
        height: 100%;
        width: 100%;

        .itemLeft {
            flex-shrink: 2;
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .itemLeftIcon {
                width: 50px;
                height: 50px;
                background-size: 100% 100%;
            }

            .itemIcon0 {
                background-image: url(~@/assets/images/screen/icon/iconFir.png);
            }

            .itemIcon1 {
                background-image: url(~@/assets/images/screen/icon/iconSet.png);
            }

            .itemIcon2 {
                background-image: url(~@/assets/images/screen/icon/iconDiao.png);
            }

            .itemIcon3 {
                background-image: url(~@/assets/images/screen/icon/iconBox.png);
            }

            .itemIcon4 {
                background-image: url(~@/assets/images/screen/icon/iconShip.png);
            }

            .itemIcon5 {
                background-image: url(~@/assets/images/screen/icon/iconLower.png);
            }

            .itemIcon6 {
                background-image: url(~@/assets/images/screen/icon/iconAddress.png);
            }

            .itemIcon7 {
                background-image: url(~@/assets/images/screen/icon/iconOther.png);
            }

            // '动火作业': '~@/assets/images/screen/icon/iconFir.png',
            // '检维修作业': '~@/assets/images/screen/icon/iconSet.png',
            // '吊装作业': '~@/assets/images/screen/icon/iconDiao.png',
            // '有限空间': '~@/assets/images/screen/icon/iconBox.png',
            // '船只靠离泊': '~@/assets/images/screen/icon/iconShip.png',
            // '下舱作业': '~@/assets/images/screen/icon/iconLower.png',
            // '巡检巡查': '~@/assets/images/screen/icon/iconAddress.png',
            // '其他作业': '~@/assets/images/screen/icon/iconOther.png'

            @keyframes rotate {
                from {
                    transform: rotateY(0deg);
                }

                to {
                    transform: rotateY(360deg);
                }
            }
        }

        .itemRight {
            flex-shrink: 1.5;
            width: 100%;
            display: flex;
            flex-direction: column;
            color: #ffffff;
            align-items: start;
            justify-content: center;

            .numberWrap {
                margin-bottom: 4px;

                .number {
                    font-size: 18.88px;
                    font-weight: 700px;
                    color: rgba(0, 224, 255, 1);
                    margin-right: 4px;
                }
            }

            .name {
                font-size: 15px;
                font-weight: 700;
            }

            .title {
                font-size: 10.7px;
                color: rgba(0, 224, 255, 1);
            }
        }
    }
}

// 异常流程
.lineWrap {
    height: calc(16vh);
    overflow-y: auto;
    // margin-top: 0.5vh;

    .contentItem {
        display: flex;
        height: 4vh;
        justify-content: center;
        align-items: center;
        padding: 2px 0px;
        color: rgba(248, 200, 111, 1);



        .iconWrap {
            width: 3vw;
            display: flex;
            align-items: center;
            justify-content: center;

            .icon {
                width: 1.25vw;
                height: 1.25vw;

                background-image: url(~@/assets/images/screen/icon/jinggao.png);
                background-size: 100% 100%;
            }
        }

        .name {
            margin: 0px 4px;
            width: 60px;
        }

        .title {
            width: calc(100% - 6vw - 14px);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            max-height: 3.0em;
            /* 高度为行高的2倍 */
            line-height: 1.5em;
            text-overflow: ellipsis;
            font-size: 13px;
            padding-right: 20px;
        }

        .time {
            font-size: 12px;
        }

        @media screen and (max-width: 1650px) {
            .title {
                font-size: 12px;
            }
        }

        .options {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 64px;

            .optionBtn {
                margin: 0px;
                color: rgba(0, 240, 255, 1);
                border-color: rgba(0, 56, 255, 0.5);
            }

            .optionBtn:hover {
                border-color: rgba(0, 56, 255, 1);
            }

            .gradient-border-button {
                color: rgba(0, 240, 255, 1);
                border: none;
                background-image: linear-gradient(to right, #FFC107, #FF5722);
                background-clip: border-box;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                transition: background-position 0.5s ease;
            }

            .gradient-border-button:hover {
                background-position: right center;
            }
        }
    }
}

// 底部8种类型
.itemBox {
    ::v-deep(.boxItemWrap) {
        height: 8vh;
    }
}
</style>